<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历操作</title>
		<!-- 元素遍历操作   针对DOM树中元素进行便立马【父子级关系】 
		children()     功能：获取匹配元素集合中每个元素的直接子元素
		parent()       功能：获取匹配元素集合中每个元素的直接父元素
		
		siblings()     功能：获取匹配元素集合中每个元素的所有兄弟元素
		
		next()         功能：获取匹配元素集合中每个元素的下一个兄弟元素
		prev()         功能：获取匹配元素集合中每个元素的上一个兄弟元素
		
		each()         功能：遍历匹配元素集合，对每个元素执行指定的函数
		-->
		<style>
			.container{
				border: 1px solid red;
				margin: 10px;
				padding: 10px;
			}
			.box{
				background-color:#d0e6bf;
				margin: 10px;
				padding: 10px;
			}
			button{
				margin: 10px;
				padding: 10px;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">1盒</div>
			<div class="box" id="box2">2盒</div>
			<div class="box" id="box3">3盒</div>
			<div class="box" id="box4">4盒</div>
		</div>
		<button id="getcrBtn">获取直接子元素</button>
		<button id="getpBtn">获取父元素</button>
		<button id="getsbBtn">获取兄弟元素</button>
		<button id="getntBtn">获取下一个兄弟元素</button>
		<button id="getpvBtn">获取上一个兄弟元素</button>
		<button id="eachBtn">遍历元素</button>
		
		<script>
			/* 1.点击 获取直接子元素  按钮 container父元素给box元素加 10px */
			$("#getcrBtn").click(function(){
				var cr=$(".container").children().css("border","10px solid #c8c8c8");	
			});
			/* 2.点击  获取父元素   container父元素给 */
			$("#getpBtn").click(function(){
				$(".box").parent().css("background","#d0e6bf")
			});
			/* 3.点击  获取兄弟元素 按钮  box3的兄弟元素  加背景色 #f00 */
			$("#getsbBtn").click(function(){
				$("#box3").siblings().css("background","#f00")
			});
			/* 4.点击  获取下一个兄弟元素 按钮  box2的兄弟元素  加背景色 #eee */
			$("#getntBtn").click(function(){
				$("#box2").next().css("background","#eee")
			});
			/* 5.点击  获取上一个兄弟元素 按钮  box4的上一个元素  圆 阴影 字体放大 */
			$("#getpvBtn").click(function(){
				$("#box4").prev().css({"width":"200px",
				                       "height":"200px",
									   "border-radius":"50%",
				                        "box-shadow":"10px 10px 10px #93b072",
										"font-size":"20px"
				});
			});
		    /* 6.点击  遍历元素  页面动态输出“box1”...
			     each(function(index,element){传入下标  $()})
			     语法：(` `)  反引号     传入下标 $(index)
			*/
		   $("#eachBtn").click(function(){
			   $(".box").each(function(i,e){  //i是下标   e是元素   --形象
				   $(e).text(`这是第${i+1}个盒子`);
			   });
		   });
		</script>
	</body>
</html>